import React, { FC, ReactElement } from 'react';
import {
  Descriptions,
  Spin,
  Tag,
  Typography,
  Image,
} from '@douyinfe/semi-ui';
import dayjs from 'dayjs';
import type { Data } from '@douyinfe/semi-ui/lib/es/descriptions';
import type { FieldsCityInfo } from '../types';

interface IProps {
  loading: boolean;
  data: Partial<FieldsCityInfo>;
}

export const FieldsCitiesDetail: FC<IProps> = ({
  loading,
  data,
}): ReactElement => {
  const descriptionItems: Data[] = [
    {
      key: '城市简称',
      value: <Tag color="cyan">{data.name}</Tag>
    },
    {
      key: '城市全称',
      value: <Typography.Text>{data.aliasName ?? '-'}</Typography.Text>
    },
    {
      key: '城市描述',
      value: <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>{data.description ?? '-'}</pre>
    },
    {
      key: '城市封面',
      value: typeof data.img === 'string'
        ? <Image src={data.img} width={200} height={100} />
        : '-',
    },
    {
      key: '创建时间',
      value: !!data.createTime
        ? dayjs(data.createTime).format('YYYY-MM-DD HH:mm:ss')
        : '-',
    },
    {
      key: '更新时间',
      value: !!data.updateTime
        ? dayjs(data.updateTime).format('YYYY-MM-DD HH:mm:ss')
        : '-',
    },
  ];

  return (
    <div className="fields-cities-item-detail">
      <Spin spinning={loading}>
        <Descriptions data={descriptionItems} />
      </Spin>
    </div>
  );
}

export default FieldsCitiesDetail;